<template>
	<view class="page">
		<image class="topbj" src="https://www.mlito.com/jy/img/topbj.png"></image>
		
		<view class="top">
			<view class="topl">积分：156</view>
			<view class="topr">12</view>
			<image class="tx" src="https://www.mlito.com/jy/img/tx.png"></image>
			<view class="name">竹林听雨</view>
			<view class="ht"><p><span style="width: 60%;"></span></p></view>
			<view class="dj">
				<image src="https://www.mlito.com/jy/img/x1.png"></image>
				<image src="https://www.mlito.com/jy/img/x2.png"></image>
				<image src="https://www.mlito.com/jy/img/x2.png"></image>
			</view>
		</view>
		
		<swiper class="swiper" indicator-dots="true" indicator-active-color="#ffffff">
		   				<swiper-item>
		   					<image src="https://www.mlito.com/jy/img/banner.png"></image>
		   				</swiper-item>
						<swiper-item>
							<image src="https://www.mlito.com/jy/img/banner.png"></image>
						</swiper-item>
						<swiper-item>
							<image src="https://www.mlito.com/jy/img/banner.png"></image>
						</swiper-item>
		</swiper>
		
		<view class="box1">
			<p><span>2</span><i>进行中</i><b></b></p>
			<p><span>12</span><i>已完成</i><b></b></p>
			<p><span>12</span><i>通知</i><b></b></p>
			<p><span>156</span><i>积分</i></p>
		</view>
		
		<view class="box2">
			<image src="https://www.mlito.com/jy/img/my1.png" mode="heightFix"></image>
			<image src="https://www.mlito.com/jy/img/my2.png" mode="heightFix"></image>
			<image src="https://www.mlito.com/jy/img/my3.png" mode="heightFix"></image>
			<image src="https://www.mlito.com/jy/img/my4.png" mode="heightFix"></image>
		</view>
		
		<view class="box3">
			<image src="https://www.mlito.com/jy/img/my_shop.png" mode="widthFix"></image>
		</view>
		
		<view class="box4">
			<image class="box4_t" src="https://www.mlito.com/jy/img/my_ft.png" mode="heightFix"></image>
			
		
										 <view class="lists_rboxt">
											 <view class="lists_rboxt_title"><span>森林防火巡查</span><image class="lists_rboxt_title_img" src="https://www.mlito.com/jy/img/list_bt.png" mode="heightFix"></image></view>
											 <image class="lists_rboxt_img" src="https://www.mlito.com/jy/img/img.png" mode="widthFix"></image>
											 
											 <view class="lists_rboxt_date">完成任务获得：5积分</view>
											 
										 </view>
										 
										 <view class="lists_rboxt">
										 											 <view class="lists_rboxt_title"><span>森林防火巡查</span><image class="lists_rboxt_title_img" src="https://www.mlito.com/jy/img/list_bt.png" mode="heightFix"></image></view>
										 											 <image class="lists_rboxt_img" src="https://www.mlito.com/jy/img/img.png" mode="widthFix"></image>
										 											 
										 											 <view class="lists_rboxt_date">完成任务获得：5积分</view>
										 											 
										 </view>
			
			
		</view>
		<!-- <view class="footer">
			<image src="https://www.mlito.com/jy/img/nav1.png"></image>
			<image src="https://www.mlito.com/jy/img/nav2.png"></image>
			<image src="https://www.mlito.com/jy/img/nav3.png"></image>
			<image src="https://www.mlito.com/jy/img/nav4.png"></image>
		</view> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {},
		onLoad(e) {},
		onShow() {

		},
		methods: {
		}
	}
</script>
<style scoped lang="scss">
	
	
	.lists_rboxt_f{width: 100%;		display: flex;justify-content: space-between;}
	.lists_rboxt{width:616rpx; height: 210rpx;  margin: 0 20rpx 20rpx; border-radius: 10rpx; box-sizing: border-box; position: relative; overflow: hidden;}
	.lists_rboxt_title{ width: auto; height: 45rpx; position: absolute; top:0; left: 0; display: flex;}
	.lists_rboxt_title span{width: auto; height: 45rpx; line-height: 45rpx;  background: #fff; padding: 0 20rpx; background: #fff; font-size: 28rpx; color: #333333;}
	.lists_rboxt_title_img{width: auto; height: 45rpx; display: inline-block; }
	.lists_rboxt_img{width: 616rpx; height: 210rpx; }
	.lists_rboxt_date{ width: auto; height: 35rpx; display: inline; line-height: 35rpx; border-radius: 100rpx; background: #eb5543; color: #fff; font-size: 25rpx; padding: 0 15rpx; margin: 4rpx 0 0 0; position: absolute; bottom: 20rpx; right: 20rpx; z-index: 2;}

	
	
	.box4{width: 656rpx; height: auto; border-radius: 20rpx; overflow: hidden; margin:30rpx 47rpx 50rpx;background: #ba251e;  }
	.box4_t{ width: auto; height: 84rpx; position: relative; display: inline-block; margin:0 0; }
	
	
	.box2{width: 656rpx; height: 200rpx; border-radius: 20rpx; overflow: hidden; margin:30rpx 47rpx 0;background: #ba251e;  }
	.box2 image{ width: 94rpx; height: 131rpx; position: relative; display: inline-block; margin:34.5rpx 30rpx; }
	.box3{width: 656rpx; height: auto; border-radius: 20rpx; overflow: hidden; margin:30rpx 47rpx 0;background: #ba251e;  }
	.box3 image{ width: 100%; height: auto; position: relative; display: inline-block;  }
	
	.box1{width: 656rpx; height: 124rpx; border-radius: 20rpx; overflow: hidden; margin:30rpx 47rpx 0;background: #ba251e;  }
	.box1 p{ width: 25%; height: 124rpx; position: relative; display: inline-block; }
	.box1 p span{ width: 100%; height:50rpx; line-height: 50rpx; display: inline-block;font-size: 31rpx; color: #f8f9fa; text-align: center; margin:15rpx 0 0 ; }
	.box1 p i{ width: 100%; height:32rpx; display: inline-block;line-height: 2rpx; font-size: 32rpx; color: #f8f9fa; text-align: center; margin:0rpx 0 0 ; }
	.box1 p b{ width: 3rpx; height:50rpx; position: absolute; top:37rpx;right: 0; background: #d47874;z-index: 1;}
	
	.swiper{width: 656rpx; height: 268rpx; box-shadow: 0px 6rpx 40rpx 0px rgba(0, 0, 0, 0.35);margin: 0 47rpx; border-radius: 20rpx; }
	.swiper image{width: 656rpx; height: 268rpx;  }
.top{ width: 656rpx; height: 299rpx; background: #ba251e; border-radius: 30rpx; box-shadow: 0px 6rpx 40rpx 0px rgba(0, 0, 0, 0.35); margin: 30rpx 47rpx; position: relative;z-index: 1;}
.topl{ width: 300rpx; height: 26rpx; line-height: 26rpx; color: #fff; font-size: 26rpx; top: 25rpx; left:40rpx ;position: absolute;}
.topr{ width: 45rpx; height: 43rpx; line-height:30rpx; color: #ba251e; font-size: 23rpx; top: 25rpx; right:40rpx; background: url(https://www.mlito.com/jy/img/msg.png) no-repeat; background-size: 100%; position: absolute; text-align: center; }
.tx{ width: 135rpx; height: 135rpx; top: 20rpx; left:260rpx;border-radius: 1000rpx; border: 2px solid #fff; position: absolute;}
.name{ width: 100%; height: 38rpx;position: absolute; top:175rpx;left:0; text-align: center; line-height: 38rpx; color: #fff;font-size: 38rpx;}
.dj{ width: 100%; height: 28rpx;position: absolute; top:250rpx;left:0; text-align: center; line-height: 28rpx; color: #fff;font-size: 38rpx;}
.dj image{ width: 28rpx; height: 28rpx; display: inline-block; margin: 0 5rpx;}
.ht{ width: 231rpx; height: 15rpx;position: absolute; top:225rpx;left:211rpx; }
.ht p{ width: 231rpx; height: 15rpx;position: relative;border-radius: 100rpx; background: #fff; }
.ht p span{ width: 0; height: 9rpx;position: absolute;border-radius: 100rpx; background: #ba251e;top: 3rpx; left:3rpx }


.topbj{ width: 100vw; height: 305rpx; position: fixed; z-index: 0; top: 0; left: 0;}
	// .footer{ width: 100vw; height: 110rpx; position: fixed; background: #fff;  box-shadow: 0px 6px 40px 0px rgba(0, 0, 0, 0.35); z-index: 99;left: 0; bottom: 0;}
	.page {
		width: 100vw;
		min-height: 100vh;
		background: url(https://dcdn.it120.cc/haitangweiguang/login_bj.png) no-repeat;
		background-size: 100%;
		background-color: #fff;
		display: flex;
		flex-flow: wrap;
		align-content: flex-start;
	}
</style>